<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/jquery.js"></script>
  <script src="../js/qs.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
  <style>
    body {
      padding: 20px 10px;
    }

    .login {
      width: 500px;
    }

    .myTable {
      margin-top: 20px;
    }
  </style>
  <title>智慧校园选课系统</title>
  <script>
    var qs = Qs
    $(function () {
      // 登录按钮点击事件处理函数
      $('#btn_login').click(function (event) {
        event.preventDefault()
        var loginData = {
          username: $('#login_username').val(),
          password: $('#login_pwd').val()
        }
        if (loginData.username != '' && loginData.password != '') {
          $.ajax({
            url: 'http://47.94.46.113:7788/user/login',
            method: 'post',
            data: JSON.stringify(loginData),
            headers: {
              'Content-Type': 'application/json',
            },
            success: function (res) {
              // 登录成功后，将登录表单换成欢迎您！
              $('div.login').html('<h3>欢 迎 您！</h3>')
              // 将token设置到全局的ajax中
              $.ajaxSetup({
                headers: {
                  'Authorization': res.data.token
                }
              })
              // 查询所有的一级栏目
              findParentCate()
            }
          })
        } else {
          alert('用户名和密码不能为空')
        }
      })
      // 查询所有一级栏目
      function findParentCate() {
        $.get('http://47.94.46.113:7788/category/findAll', function (res) {
          // 将所有的一级栏目过滤出来
          var parentCate = res.data.filter(function (item) {
            return item.parentId === null
          })
          // 清空下拉列表
          $('#form_parId').empty()
          // 将一级栏目遍历追加到表单的下拉列表
          parentCate.forEach(function (item) {
            $('<option value="' + item.id + '">' + item.name + '</option>').appendTo('#form_parId')
          })
        })
      }
      // 数据重载
      function reloadData() {
        $.get('http://47.94.46.113:7788/category/findAll', function (res) {
          // 清空tbody
          $('tbody').empty()
          res.data.forEach(function (item, index) {
            $(`
              <tr>
                <td>`+ (index + 1) + `</td>
                <td id="tab_name">`+ item.name + `</td>
                <td id="tab_parId">`+ item.parentId + `</td>
                <td id="tab_des">`+ item.description + `</td>
                <td>
                  <button id="`+ item.id + `" type="button" class="btn btn-link">删除</button>
                  <button id="`+ item.id + `" type="button" class="btn btn-link">修改</button>
                </td>
              </tr>
            `).appendTo('tbody')
          })
        })
      }
      // 加载数据按钮点击事件
      $('#btn_reload').click(reloadData),
        // 新增按钮点击事件
        $('#btn_add').click(function () {
          // 打开模态框之前，置空表单
          $('#form_name').val(null),
            $('#form_parId').val(null),
            $('#form_des').val(null)
          $('#form_id').val(null)
          // 打开模态框
          $('#modal').modal('show')
        })
      // 表单保存按钮点击事件
      $('#btn_save').click(function () {
        if ($('#form_id').val() != '') {
          // 将新增表单中的数据获取，并封装
          var saveData = {
            id: $('#form_id').val(),
            name: $('#form_name').val(),
            parentId: $('#form_parId').val(),
            description: $('#form_des').val()
          }
        } else {
          var saveData = {
            name: $('#form_name').val(),
            parentId: $('#form_parId').val(),
            description: $('#form_des').val()
          }
        }
        // 表单验证，name值必填项
        if (saveData.name != '') {
          $.ajax({
            url: 'http://47.94.46.113:7788/category/saveOrUpdate',
            method: 'post',
            data: qs.stringify(saveData),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
              reloadData()               // 重新加载数据
              $('#modal').modal('hide')  // 关闭模态框
              alert(res.message)         // 新增成功的提示
            }
          })
        } else {
          alert('请输入栏目名称')
        }
      })
      // 删除、修改按钮点击事件(事件代理，tbody代理button执行点击事件)
      $('tbody').on('click', '.btn-link', function (event) {
        var id = $(this).attr('id')
        if (event.target.innerText == '删除') {
          var result = confirm('是否确认删除？')
          if (result) {
            $.get('http://47.94.46.113:7788/category/deleteById', { id: id }, function (res) {
              reloadData()       // 刷新数据
              alert(res.message) // 提示删除成功
            })
          }
        } if (event.target.innerText == '修改') {
          // 将数据的ID设置到表单的隐藏的input中
          $('#form_id').val(id)
          // 将表格内text文本获取，并且设置到输入框的value中
          $('#form_name').val($(this).closest('tr').find('#tab_name').text())
          $('#form_parId').val($(this).closest('tr').find('#tab_parId').text())
          $('#form_des').val($(this).closest('tr').find('#tab_des').text())
          // 打开模态框
          $('#modal').modal('show')
        }
      })
    })
  </script>
</head>

<body>
  <!-- 登录区域 -->
  <div class="login">
    <form>
      <div class="form-group row">
        <label for="login_username" class="col-sm-2 col-form-label">用户名</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="login_username">
        </div>
      </div>
      <div class="form-group row">
        <label for="login_pwd" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="login_pwd">
        </div>
      </div>
      <button id="btn_login" style="float: right;" type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <!-- 按钮区域 -->
    <div class="btns">
      <button id="btn_reload" type="button" class="btn btn-primary">加载数据</button>
      <button id="btn_add" type="button" class="btn btn-primary">新增栏目</button>
    </div>
    <!-- 表格区域 -->
    <div class="myTable">
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th scope="col">序号</th>
            <th scope="col">栏目名称</th>
            <th scope="col">父栏目ID</th>
            <th scope="col">栏目描述</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
    <!-- 模态框区域 -->
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">新增栏目信息</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <!-- 用来存放id的地方 -->
              <input id="form_id" type="text" style="display: none;">
              <div class="form-group row">
                <label for="form_name" class="col-sm-4 col-form-label">栏目名称</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="form_name">
                </div>
              </div>
              <div class="form-group row">
                <label for="form_parId" class="col-sm-4 col-form-label">所属栏目</label>
                <div class="col-sm-8">
                  <select id="form_parId" class="form-control">

                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label for="form_des" class="col-sm-4 col-form-label">栏目描述</label>
                <div class="col-sm-8">
                  <textarea id="form_des" class="form-control"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button id="btn_save" type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>